<template>
	<view class="modifycollectioncode">
		<view class="">
			<view class="upload" @click="uploadBanner(0)" v-if="!upimage">
				<view class="upload-content">
					<view class="bg-img"></view>
					<image :src="imglink + 'member/up.png'" mode="" class="upload-img"></image>
					<view class="prop">
						上传宣传单页
						<view class="redzi">
							正面
						</view>
					</view>
					<view class="specs">
						规格1350*750px
					</view>
				</view>
			</view>
			<view class="upload" v-if="upimage">
				<image class="upload-content" :src="upimage" mode=""></image>
				<image :src="imglink + 'member/shanchu.png'" mode="" class="butt" @click="empty(0)"></image>
			</view>
			<view class="upload" @click="uploadBanner(1)" v-if="!upimageBack">
				<view class="upload-content">
					<view class="bg-img"></view>
					<image :src="imglink + 'member/up.png'" mode="" class="upload-img"></image>
					<view class="prop">
						上传宣传单页
						<view class="redzi">
							反面
						</view>
					</view>
					<view class="specs">
						规格1350*750px
					</view>
				</view>
			</view>
			<view class="upload" v-if="upimageBack">
				<image class="upload-content" :src="upimageBack" mode=""></image>
				<image :src="imglink + 'member/shanchu.png'" mode="" class="butt" @click="empty(1)"></image>
			</view>
		</view>
		<view class="msg">
			<view class="required">
				*
			</view>
			活动名称
		</view>
		<textarea class="txt" placeholder="请输入活动名称" maxlength="20" @input="descInput" v-model="reason" />
		<view class="num">{{remnant}}/20</view>
		
		<view class="msg1">
			<view class="required">
				*
			</view>
			活动备注
		</view>
		<textarea class="txt" placeholder="请输入活动名称" maxlength="20" @input="remarksInput" v-model="remark" />
		<view class="num1">{{remarkslength}}/20</view>
		
		<view class="collect-information">
			<view class="collect">*</view>
			收集家长信息
			<span style="color:red;font-size: 24rpx;margin-left: 10rpx;">(不可修改)</span>
		</view>
		<view style="margin-top: -210upx;">
			<view class="collect-reversal" :class="{'reversal': item.state == 1}" 
				v-for="(item,index) in actFormMsg">{{item.name}}</view>
		</view>
		<view v-if="commission == 1" style="margin-top: 250upx;">
			<view class="collect-information">
				<view class="collect">*</view>
					家长领取线上课程佣金收益<switch :checked='is_list == 1' @change="switchCommission"  color="#FF8B46" style="text-align: center; margin-left: 150upx;"/>
			</view>
		</view>
		<view style="margin-top: -200upx;">
		<view v-if="is_list == 1&&item.status!=0" v-for="(item,index) in courseList" :key="index" class="olinecourse" @click="dianji(item.id)">
			<view class="topleft"><image style="width: 100%;height: 100%;" :src="item.img" mode="aspectFit"></image></view>
			<view class="topright">{{item.titles}}</view>
			<view style="color: red;">￥{{item.special_price}}<radio color="#FF8B46" style="float:right;position: relative;top: 10upx;left: 10upx;" :value="item.id" :checked="item.id === current" /></view>
			<view style="margin-left:35upx;margin-top: 20upx; font-size: 30upx;font-weight: bold;">
				<view style="color:#8C939D" v-if="minmoney!='0'&&minmoney">新用户下单奖励<text v-if="minmoney!='0'&&minmoney">(新客单>{{minmoney}}元)</text>：<text style="color: #FF8B46;">￥{{reward_new_user_money}}</text></view>
				<view style="color:#8C939D">直接推荐成功收益：<text style="color: #FF8B46;">￥{{item.first_money}}</text></view>
				<view style="color:#8C939D">下级推荐成功收益：<text style="color: #FF8B46;">￥{{item.second_money}}</text></view>
				<view style="color:#8C939D">提成规则：<text style="color: #8C939D;">{{item.illustration}}</text></view>
			</view>
			
		</view>
		</view>
				<view class="btn1"></view>
				<button class="btn" @click="addcollections" v-if="imageShow&&reason">修改活动收款码</button>
				<button class="unbtn" v-if="!imageShow||!reason">修改活动收款码</button>
		</view>
	
</template>

<script>
	import {uploadFile} from '@/common/alioss.js'
	export default {
		data() {
			return {
				imglink: this.$store.state.imgLink,
				reason:'',
				remnant:0,
				upimage:'',
				upimageBack:'',
				store_id:'',
				images:[],
				imageShow:true,
				actList:[],
				activity_id:'',
				arrar:{},
				actFormMsg:'',
				reward_new_user_money:0,
				commission:0,
				online_courses_off:0,
				courseList:[],
				current:0,
				remarkslength:0,
				remark:'',
				is_list:0,
				minmoney:0
			}
		},
		onLoad(options) {
			let store_id = parseInt(options.store_id,10);
			console.log('进入了onload 获取url的store_id',store_id)
			this.store_id = parseInt(store_id,10)
			this.$store.commit('updateStoreId',store_id)
			this.activity_id = parseInt(options.id,10)
			// #ifdef H5
				this.GetQueryString("id")
			// #endif
			this.getActList(this.activity_id)
			this.getminmoney()
		},
		methods: {
			getminmoney(){
				let data = {
					token:this.$store.getters.getToken,
				}
				this.$api.get_store_capital(data).then(res => {
					if(res.status){
						console.log(res,"1456")
						this.minmoney=res.storeInfo.reward_new_user_pay_min
					}else{
						uni.showToast({
							title:res.msg,
							icon:"none",
							duration:2000
						})
					}
					
				}).catch(err => {
					
					uni.showToast({
						title:err,
						icon:"none",
						duration:2000
					})
					
					console.log(err,'that.$api.get_store_income')
				})
			},
			switchCommission(){
				this.is_list=!this.is_list
			},
			remarksInput(){
				var txtVal = this.remark.length;
				this.remarkslength = txtVal;
			},
			dianji(index){
				this.current=Number(index)
			},
			getCourseList(){
				let data={
					token:this.$store.getters.token,
					customer_store_id:this.$store.getters.getStoreId
				}
				let that=this
				this.$api.get_online_courses(data).then(res=>{
					res.list.filter(item=>{
						console.log("789")
						if(item.title.length>20){
							item.titles=item.title.slice(0,20)+"..."
							that.courseList.push(item)
						}else{
							item.titles=item.title
							that.courseList.push(item)
						}
					})
					console.log(res.list,"ceshi")
					for(let i=0;i<res.list.length;i++){
						if(Number(res.list[i].id)===Number(this.arrar.online_courses_id)){
							this.current=Number(res.list[i].id)
							console.log("进来过")
						}
					}
					this.$api.gain_shop_msg(data).then(res=>{
						this.reward_new_user_money=res.data.reward_new_user_money
						if(res.data.open_recommend==1){
							this.commission=res.data.open_recommend
							this.is_list=res.data.open_recommend
							this.online_courses_off=res.data.open_recommend
						}
						console.log(res.data,"tisi")
					})
				})
			},
			//获取地址栏的 id
			GetQueryString(name)
			{
				var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
				var r = window.location.search.substr(1).match(reg);
				if(r!=null)this.activity_id = unescape(r[2]); 
				return null;
			},
			// 获取所有活动信息
			getActList(activity_id){
				this.getFormMsg(activity_id)
				let data = {
					toekn:this.$store.getters.getToken,
					page:1,
					pagesize:100000,
					store_id:this.$store.getters.getStoreId,
					operate_status:this.operate_status,
					active_status:this.active_status
				}
				this.$api.gain_act_manange(data).then(res => {
					console.log(res)
					if(res.status){
						this.actList = res.list.data
						console.log(this.actList,"96110")
						for(let i = 0; i < this.actList.length; i++){
							if(this.actList[i].activity_id == activity_id){
								this.upimage = this.actList[i].image[0].image
								this.upimageBack = this.actList[i].image[1].image
								this.reason = this.actList[i].name
								this.remark=this.actList[i].remark
								this.remarkslength=this.remark.length
								this.remnant = this.actList[i].name.length
								this.arrar = this.actList[i]
								for(let n = 0; n < this.arrar.activity_description.length; n++){
									if(this.arrar.activity_description[n].description_type==1){
										this.arrar.activity_description[n].type="text"
									}else if(this.arrar.activity_description[n].description_type==0){
										this.arrar.activity_description[n].type="photo"
									}
								}
								console.log(this.arrar,'AAAAAAAAAAAAAAAAAAAA');
								console.log(this.actList[i],'64584545')
								this.getCourseList()
							}
						}
						this.lastPage = res.list.last_page
						// this.getCustomer()
						console.log(this.actList)
						// for(let i=0; i<this.actList.length; i++){
						// 	this.avatar = this.actList[i].customer[0].avatar
						// 	this.nickname = this.actList[i].customer[0].nickname
						// }
						
					}else{
						uni.showToast({
							title:res.msg,
							icon:"none",
							duration:2000
						})
					}
				}).catch(err => {
					console.log(err)
				})
			},
			// 获取表单信息
			getFormMsg(id){
				let data = {
					token:this.$store.getters.getToken,
					activity_id:id
				}
				let that = this
				this.$api.together_order_msg(data).then(res => {
					if(res.status){				
						let data = res.res
						console.log(res)
						this.actFormMsg = []
						data.forEach(item => {
							let res = {}
							res['id'] = item.name.field_id;
							res['name'] = item.name.name;
							res['placeholder'] = '请填写'+ item.name.name;
							res['state'] = item.name.status;
							this.actFormMsg.push(res)
						})
						
						console.log(this.actFormMsg,'AAAAMMMMMMMMMMMMM');
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none',
							duration:2000
						})
					}
				}).catch(err => {
					console.log(err)
				})
				// this.$api.together_order_msg(data).then(res => {
				// 	console.log(res)
				// 	if(res.status){
				// 		let array = res.res
				// 		let actFormMsg=[]
				// 		array.forEach(item => {
				// 			that.list.actFormMsg = []
				// 			let infoMsg = {
				// 				id:'',
				// 				value:'',
				// 				name:'',
				// 				state:"",
				// 				placeholder:''
				// 			}
				// 			infoMsg.id = item.name.field_id
				// 			infoMsg.name = item.name.name
				// 			infoMsg.state = item.name.required
				// 			infoMsg.placeholder = '请输入' + item.name.name
				// 			infoMsg.value = ''
				// 			actFormMsg.push(infoMsg)
				// 			console.log(infoMsg)
				// 		})
						
				// 		that.list.actFormMsg=actFormMsg
				// 		that.editAct.actFormMsg=actFormMsg
				// 		that.$store.state.actForm=actFormMsg
				// 		that.list.actFormMsg = res.res
				// 		console.log(that.list.actFormMsg,"957777")
						
				// 	}else{
				// 		uni.showToast({
				// 			title:res.msg,
				// 			icon:'none',
				// 			duration:2000
				// 		})
				// 	}
				// }).catch(err => {
				// 	console.log(err)
				// })
				// console.log(this.actFormMsg,"95777")
			},
			
			descInput(){
				var txtVal = this.reason.length;
				this.remnant = txtVal;
			},
			addcollections(){
				let time = new Date()
				let arrar=this.arrar
				arrar.name=this.reason
				arrar.image=[]
				arrar.image.push(this.upimage)
				arrar.image.push(this.upimageBack)
				this.arrar['actFormMsg'] = this.actFormMsg
				let data  = {}
				if(this.is_list==1 && this.commission==1){
					data={
						token:this.$store.getters.getToken,
						activity_id:this.arrar.activity_id,
						store_id:this.$store.getters.getStoreId,
						arrar:JSON.stringify(arrar),
						operate_status:1,
						open_online_courses:1,
						online_courses_id:this.current,
						remark:this.remark
					}
				}else{
					data={
						token:this.$store.getters.getToken,
						activity_id:this.arrar.activity_id,
						store_id:this.$store.getters.getStoreId,
						arrar:JSON.stringify(arrar),
						operate_status:1,
						open_online_courses:0,
						// online_courses_id:0,
						remark:this.remark
					}
				}
				this.$api.edit_group_act(data).then(res => {
					console.log(res)
					if(res.status){
						uni.showToast({
							title:'修改成功',
							icon:'none',
							duration:2000
						})
						setTimeout(() => {
							uni.navigateTo({
								url:"/pages/memberCenter/activityManage/activityManage?topNavActiveIndex=0&store_id="+this.$store.getters.getStoreId
							})
						},1000)
					}
				}).catch(err => {
					console.log(err)
				})
			},
			empty(num){
				if(num == 0){
					this.upimage = ""
				}else{
					this.upimageBack = ""
				}
				if(this.upimage && this.upimageBack)
				{
					this.imageShow = true
				}else{
					this.imageShow = false
				}
			},
			uploadBanner(index){
				const that = this;
				uni.chooseImage({
					count:1,
					sizeType: ['original', 'compressed'],
				    success: (chooseImageRes) => {
						console.log(chooseImageRes,'chooseImageRes');
						// if(!/\.(gif|jpg|jpeg|png|bmp)$/.test(chooseImageRes.tempFiles[0].name)) {
							
						// 	uni.showToast({
						// 		title:'图片格式错误，须为gif/jpg/jpeg/png/bmp',
						// 		icon:'none',
						// 		duration:5000,
						// 	})
						// 	return false
						// }
						uni.getImageInfo({
							src: chooseImageRes.tempFilePaths[0],
							success: (image) => {
								uni.showLoading({
									title: '图片上传中'
								})
								uploadFile(chooseImageRes.tempFilePaths[0]).then(res => {
									console.log(res)
									if(res.status){
										
										if(index==0){
											that.upimage=res.data.url
										}else{
											that.upimageBack=res.data.url
										}
										if(that.upimage && that.upimageBack)
										{
											this.imageShow = true;
										}
										that.images.splice(index,1,res.data.url)
										uni.setStorageSync('images',that.images)
										uni.hideLoading()
										
									}
								}).catch(err => {
									uni.showToast({
										title:err,
										icon:'none',
										duration:5000,
									})
								})
							}
						})
					}
				})
			},
		}
	}
</script>

<style>
	.olinecourse{
		/* box-shadow: 0 4upx 18upx 0 rgba(0,0,0,0.13); */
		border: solid rgba(0,0,0,0.13) 1px;
		border-left: none;border-right: none;border-bottom: none;
		padding: 15upx;
		padding-left: 0upx;
		padding-right: 0upx;
		width: 690upx;
		margin-left: 15upx;
		/* margin-top:-80upx */
	}
	.olinecourse:nth-child(3){
		border-top: none;
		padding: 15upx;
		padding-left: 0upx;
		padding-right: 0upx;
		width: 690upx;
		margin-left: 30upx;
	}
	.label{
		width: 200upx;
		height: 300upx;
		background-image: required("https://tool.tuanhaoke.cn/static/image/member/orangelabel.svg");
	}
	.topleft{
		width: 280upx;
		height: 150upx;
		/* position: relative;
		left: 0upx; */
		float: left;
	}
	.topright{
		width: 400upx;
		height: 100upx;
		font-size: 30upx;
		font-weight: bold;
		float: left;
	},
	.upload{
		display: inline-block;
		margin-top: 26upx;
		margin-left: 30upx;
		width: 330upx; 
		height: 430upx;
		overflow: auto;
		border-radius: 8upx;
		box-shadow: 0 4upx 18upx 0 rgba(0,0,0,0.13);
		vertical-align: middle;
	}
	.bg-img{
		position: absolute;
		top: 90upx;
		width: 230upx;
		height: 300upx;
		z-index: -1;
		margin-left: 35upx;
		border-radius: 10upx;
		background-color: #FFFAF7;
	}
	.upload-content{
		margin-top: 13upx;
		margin-left: 17upx;
		width: 296upx; 
		height: 396upx;
		background: url(https://tool.tuanhaoke.cn/static/image/member/border.png) no-repeat;
		background-size:100% 100%; 
		text-align: center;
	}
	.upload-img{
		width: 96upx;
		height: 97upx;
		margin-top: 113upx;
	}
	.specs{
		font-family: PingFangSC-Light; 
		font-size: 20upx; 
		color: #CCCCCC;
	}
	.prop{
		margin-top: 7.5upx;
		font-size: 24upx;
		color: #999999;
	}
	.redzi{
		display: inline-block;
		margin-top: 4upx;
		color: #FF8B46;
	}
	.msg{
		font-family: PingFangSC-Medium;
		margin-top: 18upx;
		margin-bottom: 20upx;
		margin-left: 4%;
		line-height: 42upx;
		letter-spacing: 0;
		color: #151515;
		font-size: 30upx;
		font-weight: bold;
	}
	.msg .required{
		display: inline-block;
		margin-right: 10upx;
		font-size: 35upx;
		color: #FF391F;
	}
	.msg1{
		font-family: PingFangSC-Medium;
		margin-top: -250upx;
		margin-bottom: 20upx;
		margin-left: 4%;
		line-height: 42upx;
		letter-spacing: 0;
		color: #151515;
		font-size: 30upx;
		font-weight: bold;
	}
	.msg1 .required{
		display: inline-block;
		margin-right: 10upx;
		font-size: 35upx;
		color: #FF391F;
	}
	.txt{
		margin-left: 30upx;
		margin-bottom: 300upx;
		padding: 24upx;
		width: 642upx;
		height: 138upx;
		font-size: 24upx;
		background-color: #F5F5F5;
		border-radius: 12upx;
	}
	.num{
		position: absolute;
		right: 54upx;
		top: 680upx;
		font-size: 24upx;
		color: #999999;
	}
	.num1{
		position: absolute;
		right: 54upx;
		top: 970upx;
		font-size: 24upx;
		color: #999999;
	}
	.modifycollectioncode .btn{
		position: relative;
		width: 638upx;
		color: #ffffff;
		font-size: 28upx;
		line-height: 100upx;
		border-radius: 60upx;
		background-image: url(https://tool.tuanhaoke.cn/static/image/member/member-center.png);
		position: fixed;
		bottom: 0upx;
		left:65upx;
	}
	.unbtn{
		position: relative;
		width: 638upx;
		color: #ffffff;
		font-size: 28upx;
		line-height: 100upx;
		border-radius: 60upx;
		background-color: #F6CDAB;
		position: fixed;
		bottom: 0upx;
		left:65upx;
	}
/* 	.mask{
		position: absolute;
		top: 1000upx;
		width: 750upx;
		height: 150upx;
		z-index: 998;
		background: rgba(255, 255, 255, 0.6);
	} */
	.butt{
		position: absolute;
		display: inline-block;
		margin-left: -50upx;
		margin-top: 35upx;
		width: 36upx;
		height: 36upx;
	}
	
	/* 收集字段 */
	.collect-information{
		position: relative;
		font-family: PingFangSC-Medium;
		top: -250upx;
		/* margin-top: 250upx; */
		/* margin-bottom: 40upx; */
		margin-left: 4%;
		/* line-height: 42upx; */
		letter-spacing: 0;
		color: #151515;
		font-size: 30upx;
		font-weight: bold;
	}
	.collect{
		display: inline-block;
		margin-right: 10upx;
		font-size: 35upx;
		color: #FF391F;
	}
	.arrange{
		/* position: relative;
		top: -950upx; */
	}
	.arrange-conent{
		float: left;
		margin-bottom: 40upx;
		margin-left: 47upx;
		padding: 10upx 20upx;
		border: 1upx solid #FF664F;
		border-radius: 10upx;
		font-size: 35upx;
		font-weight: 500;
		height: 50upx;
		width: 150upx;
		text-align: center;
		background: #FFFFFF;
		color: #FF664F;
	}
	.collect-reversal{
		display: inline-block;
		margin-bottom: 40upx;
		margin-left: 18upx;
		padding: 10upx 20upx;
		border: 1upx solid #CBC7C7;
		border-radius: 6upx;
		font-size: 30upx;
		font-weight: 500;
		height: 50upx;
		width: 190upx;
		text-align: center;
		background: #FFFFFF;
		color: #666666;
		
	}
	.reversal{
		color: #FF664F;
		border: 1upx solid #FF664F;
		background-image: url(https://tool.tuanhaoke.cn/static/image/member/hook.svg);
		background-repeat: no-repeat;
		background-size: 24rpx 24rpx;
		background-position: right bottom;  
	}
	.btn1{
		position: relative;
		width: 638upx;
		height:120upx;
		/* color: #ffffff; */
		font-size: 28upx;
		line-height: 100upx;
		/* border-radius: 60upx; */
		background: rgba(255,25,25,0%);
	}
</style>
